<template>
  <div class="home">
    <hr />
    <p v-for="(item, i) in list.arr" :key="i">{{ item }}</p>
  </div>
</template>

<script>
import {
  getCurrentInstance,
  reactive,
  onMounted
  // onUnmounted,
  // onBeforeMount,
  // onBeforeUnmount,
  // onActivated,
  // onDeactivated,
  // onBeforeUpdate,
  // onUpdated
} from 'vue'

export default {
  name: 'HomeView',
  beforeCreate() {
    console.log('vue2 的 beforeCreate 钩子函数')
  },
  created() {
    console.log('vue2 的 created钩子函数')
  },
  setup() {
    // console.log(getCurrentInstance())

    // const { ctx, proxy } = getCurrentInstance()
    const { proxy } = getCurrentInstance()

    // console.log(ctx.$axios()) // ctx.$axios is not a function
    console.log(proxy.$axios())

    let list = reactive({
      arr: []
    })
    console.log('setup()开始执行编译')

    const getList = () => {
      //axios()
      console.log('axios')
      list.arr = [1, 3, 3, 45, 45, 45]
    }
    // getList()

    // 使用生命周期函数的语法：onMounted（回调函数）
    onMounted(() => {
      console.log('setup()的 onMounted()钩子函数')
      getList() // 如果在生命周期函数里面调用后台接口，可能出现的问题是，直接修改一个响应式的数组，页面不会重新渲染。应该把数组，声明为一个对象。
      console.log(proxy.$axios())
    })

    return {
      list,
      getList
    }
  }
}
</script>
